Style Sheet Examples

Index for PageSpinner Style Sheet Examples

Please note that Style Sheets are not supported in most browsers.
Do not assume that all in your audience are using a Style Sheet capable browser. The latest versions of Navigator and Exporer supports style sheets, but they have different implementations of the CSS1 standard, and do not support everything described in the standard.


The HTML files for these examples can be found inside the folder named Style Sheet Examples located in PageSpinner's Examples folder. Use Finder to open files with PageSpinner to view and edit the HTML source and the Style Sheet files (.css).

The examples below uses basically the same HTML file, but the display will differ dramatically because they all use different Style Sheet definition files. Once browsers with Style Sheet support are widely used, Style Sheets will prove to be a powerful mechanism to control and easily update the look of a site.

How to work with Style Sheet files in PageSpinner:

To work with Style Sheets you need to have the PageSpinner extension named Style Sheet Menu and the folder "Style Sheets" installed in the PageSpinner Extensions folder. The helper application Style Sheet Assistant can then be launched from the Style Sheet menu. This application also contains a Style Sheet Reference.

Open both the HTML file (.html) that should use style sheets and a Style Sheet definition file (.css). You can use a copy of one of the included css-files or create a new empty file.

Use Style Sheet Assistant or the tags in the menu Tags: Style Sheet to add your style definitions in the CSS document.

To attach the style sheet to the HTML file, place the insertion point in the HEAD section of the document and use the command Tags: Style Sheet : Link to Style Sheet File. The following tag is inserted:

<LINK REL=STYLESHEET HREF="enter_filname_here.css" TYPE="text/css">

Change the filename in the HREF attribute to the name of your CSS file. Now you can edit the CSS file and save the changes. Then switch to the HTML file and click the preview button to view the styled page in your browser.

TIP: Once the HTML page is displayed in the Navigator 4.0's frontmost window you can just edit the CSS file, save changes and then switch to browser and use the browser's Reload command to preview the styled page. This method works best if you have checked the box "Autosave before preview" in File : Preferences : General.
Example 1
Lots of colors and styles - definition is in file sheet1.css

Example 2
More space between the header tags - definition is in file sheet2.css

Example 3
Uses right-aligned text - definition is in file sheet3.css

- More Examples Contents -